<template>
  <div class="content-block block-8">
    <div class="info-head">{{ title }}</div>
    <div class="info-content" ref="container">
      <v-chart ref="chart" :option="chartOption" style="width: 100%;height: 260px;"></v-chart>
    </div>
  </div>
</template>

<script>
import { loadIndustrialOutput } from '@/api/enterpriseReporting'
import ChartResizeListener from '@/mixins/chart-resize-listener'
import { defaultNumber } from '@/utils'

export default {
  name: 'grid-item-eight',
  mixins: [ChartResizeListener],
  props: ['title'],
  data () {
    return {
      lists: [],
    }
  },
  computed: {
    enterpriseId () {
      return this.$route.query.enterpriseCode
    },
    chartOption () {
      const daysInMonth = 12
      const unit = ''
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          valueFormatter: value => `${defaultNumber(value)} ${unit}`
        },
        xAxis: {
          type: 'category',
          data: Array(daysInMonth).fill(1).map((v, i) => `${i + 1}月`)
        },
        yAxis: {
          type: 'value',
          name: unit,
        },
        series: [
          {
            type: 'line',
            name: this.title,
            itemStyle: {
              color: '#fd7e14'
            },
            smooth: true,
            data: this.lists.map(v => v.val),
          }
        ]
      }
    }
  },
  watch: {
    enterpriseId () {
      this.loadList()
    }
  },
  mounted () {
    this.loadList()
  },
  methods: {
    loadList () {
      const tenantId = this.enterpriseId
      if (tenantId) {
        loadIndustrialOutput(tenantId).then(res => {
          if (res.code === 200) {
            this.lists = res.data || []
          }
        })
      }
    },
  }
}
</script>

<style scoped>

</style>
